<template>
  <div class="w-screen h-screen relative">
    <div class="absolute top-0 left-0 right-0 h-10 flex-shrink-0">
      <myheader></myheader>
    </div>
    <div class="absolute top-10 left-0 right-0 bottom-0 overflow-x-hidden overflow-y-auto">
      <iframe :src="conUrl" ref="thisframe" v-if="conUrl"></iframe>
      <div class="w-full h-full overflow-x-hidden overflow-y-auto juzhone">
        选择一项吧
      </div>
    </div>
  </div>
</template>

<script setup>
import {useStore} from "vuex"
import myheader from "./myheader.vue"
import {computed, nextTick, onMounted,onBeforeUnmount, ref} from "vue";
const store = useStore()

const conUrl = computed(()=>store.state.tiaozhuan.conUrl)
const thisframe = ref(null)
// 接收iframe发过来的数据
const gettoken = (event) => {
  console.log(event,"iframe发过来的东西")
  sendtoken()
}
// 向iframe主动发送数据
const sendtoken = ()=>{
  nextTick(()=>{
    thisframe.contentWindow.postMessage("sendToken","你听到了吗？？")
  })
}

// 初始化区域
onMounted(()=>{
  console.log("挂载完成")
  window.addEventListener("getToken",gettoken)
})
onBeforeUnmount(()=>{
  console.log("销毁前，取消监听")
  window.removeEventListener("getToken",gettoken)
})
</script>

<style scoped>

</style>